<template>
  <div class="box">
    <p class="title">商品管理--修改商品</p>
    <div class="div">
        <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
            <el-form-item label="商品名称">
                <el-input style="width:50%" v-model="sizeForm.name" placeholder="请输入商品名称"></el-input>
            </el-form-item>

            <el-form-item label="商品描述" prop="name">
                <el-input style="width:50%" v-model="sizeForm.subtitle" placeholder="请输入商品描述"></el-input>
            </el-form-item>

            <el-form-item label="所属分类">
                <el-select v-model="value1" placeholder="请选择">
                    <el-option ref="item.name" v-for="item in list" :key="item.id" :label="item.name" :value="item.name">
                        <p @click="add(item.id)">{{item.name}}</p>
                    </el-option>
                </el-select>
                <el-select v-show="show" v-model="sizeForm.mainImage" collapse-tags style="margin-left: 20px;" placeholder="请选择">
                    <el-option v-for="item in list2" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="商品价格">
                <el-input style="width:30%" placeholder="价格" v-model="sizeForm.price">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>

            <el-form-item label="商品库存">
                <el-input style="width:30%" placeholder="库存" v-model="value2">
                    <template slot="append">件</template>
                </el-input>
            </el-form-item>

            <el-form-item label="商品图片">
                <el-upload
                    action="http://adminv2.happymmall.com/manage/product/upload.do"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>

            <el-form-item label="商品详情">
                <quill-editor
                    style="width:100%;margin-top:20px;"
                    ref="myQuillEditor"
                    v-model="content"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)"
                />
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" class="btn" @click="submit">提交</el-button>
            </el-form-item>
            <!-- <img :src="dialogImageUrl" alt=""> -->
        </el-form>
    </div>
  </div>
</template>
<script>
import { additive } from "@/request/http";
import { additive2 } from "@/request/http";
import { cook } from "@/request/http";
import { check } from "@/request/http";
import { amend } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    name: "UpdateMerchandise",
    data() {
        return {
            list:[],
            list2:[],
            content: '<h2>I am Example</h2>',
            editorOption: {},
            sizeForm: {
                categoryId:"",
                name:"",
                subtitle:'',
                subImages:"",
                detail:0,
                price:0,
                stock:0,
                status:1,
            },
            show:false,
            value1: "",
            value2: "",
            dialogImageUrl: '',
            dialogVisible: false
        };
    },
    computed: {
        ...mapState("a",["id"]),
    },
    methods: {
        additive(){
            additive()
            .then(data=>{
                data = data.data.data
                this.list=data
            })
        },
        add(id){
            console.log(id)
            this.show=true
            additive2(id).then(data=>{
                data = data.data.data
                console.log(data)
                this.list2=data
            })
        },
        //上传图片
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //商品详情
        onEditorBlur(quill) {
            console.log('editor blur!', quill)
        },
        onEditorFocus(quill) {
            console.log('editor focus!', quill)
        },
        onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.content = html
        },
        //提交
        submit(){
            // console.log(this.sizeForm)
            amend(this.sizeForm).then(res=>{
                console.log(res)
                this.$message({
                    message:res.data.data,
                    type:"message"
                })
                this.$router.push("Commodity")
            })
        },
        check(){
            check(this.id).then(res => {
                var list=res.data.data
                console.log(res.data.data);
                this.sizeForm= res.data.data;
                this.dialogImageUrl=list.imageHost+list.mainImage
                // this.dialogVisible = true;
                
            });
        },
        onSubmit() {
            console.log('submit!');
        }
        
    },
    mounted(){
        // this.additive()
        this.check();
    },
};
</script>
<style lang="scss" scoped>
@import "@/Scss/index.scss";
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  height: 92vh;
  overflow: scroll;
  background: #F3F3F3;
}
.div{
    @include Pd(2rem 2rem 5rem 8.5rem);
}
.title {
    @include FlexSpace();
    @include FontOnly(2rem);
    @include Pd(1rem 2rem 0 2rem);
}


</style>